<template>
  <nav id="navbar" class="relative z-10 w-full text-neutral-1000">
    <div
      class="flex flex-col max-w-screen-xl px-8 mx-auto lg:items-center lg:justify-between lg:flex-row py-4"
    >
      <div class="flex flex-col lg:flex-row items-center space-x-4 xl:space-x-8">
        <div class="flex flex-row items-center justify-between py-6">
          <div>
            <a href="/">
              <img src="../../../assets/img/logo/logo.svg" class="w-38 xl:w-56" alt="Linsir Logo" />
            </a>
          </div>
        </div>
        <div class="space-x-4 xl:space-x-2">
          <h3 class="xl:text-2xl font-bold leading-tight">{{ name }}</h3>
          <h1 class="xl:text-2xl font-bold leading-tight">{{ url }}</h1>
        </div>
        <ul
          :class="[open ? 'flex' : 'hidden lg:flex']"
          class="w-full font-bold h-auto flex flex-col flex-grow lg:items-center pb-4 lg:pb-0 lg:justify-end lg:flex-row origin-top duration-300 xl:space-x-2 space-y-3 lg:space-y-0"
        >
          <NavLink name="产品" url="/product" />
          <NavLink name="研发思想" url="#" />
          <NavLink name="数字化发展" url="#" />
          <NavLink name="关于我" url="#" />
        </ul>
      </div>
      <div :class="[open ? 'flex' : 'hidden lg:flex']" class="space-x-3">
        <!-- <base-button class="px-8 xl:px-10 py-3 mt-2 bg-inherit text-gradient border border-[#0c66ee]">
              Login
            </base-button>
            <base-button class="px-8 xl:px-10 py-3 mt-2 bg-gradient-to-r from-[#468ef9] to-[#0c66ee] text-white">
              Sign Up
            </base-button> -->
      </div>
    </div>
  </nav>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import NavLink from './NavLink.vue';

  export default defineComponent({
    name: 'Navbar',
    components: { NavLink },

    setup() {
      const open = false;
      const name = '企业数字化平台';
      const url = 'www.linrk.com';
      return {
        open,
        url,
        name,
      };
    },
  });
</script>
